<template>
  <div class="person" style="width:99%;margin-top:-25px;">
    <!-- 查询条件 -->
    <div class="query-box">
      <el-form :model="dataForm" status-icon ref="dataForm">
        <el-row>
          <el-col :span="4">
            <!-- <div class="depart-box">
              <div class="slect-title">分中心编码</div>
              <el-select filterable clearable v-model="dataForm.code">
                <el-option
                  v-for="item in branchcenterOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </div> -->
            <el-form-item label="" prop="code">
              <el-input v-model="dataForm.code" placeholder="分中心编码">
                <template slot="prepend">分中心编码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
          <div class="depart-box">
              <div class="slect-title">分中心名称</div>
              <el-select filterable clearable v-model="dataForm.name">
                <el-option
                  v-for="item in branchcenterOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="headmaster">
              <el-input v-model="dataForm.headmaster" placeholder="校长姓名">
                <template slot="prepend">校长姓名</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="" prop="phone">
              <el-input v-model="dataForm.phone" placeholder="手机号码">
                <template slot="prepend">手机号码</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
          <div class="depart-box">
              <div class="slect-title">大区经理</div>
              <el-select filterable clearable v-model="dataForm.signRep">
                <el-option
                  v-for="(item,index) in signRepOption"
                  :key="index"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
              <div class="depart-box">
                <div class="slect-title">状态</div>
                <el-select clearable v-model="dataForm.status" filterable>
                  <el-option
                    v-for="item in isopen"
                    :key="item.lable"
                    :label="item.value"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-row class="area">
              <el-col :span="4">
                <span class="city-title">签约地区：</span>
              </el-col>
              <el-col :span="17" style="margin-left:-1px">
                <el-form-item label prop="area">
                  <el-cascader
                    clearable
                    @change="addressChange"
                    size="large"
                    :options="options"
                    v-model="selectedOptions"
                  ></el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="7" style="margin-left:0">
            <el-tag
              style="float:left;margin-top: 4px;"
                    v-for="tag in diqutags3"
                    :key="tag.key"
                    closable
                    @close='tagsClose(tag)'
                    :type="tag.type">
                    {{tag.value}}
                  </el-tag>
          </el-col>
        </el-row>
      </el-form>
      <div class="from-btns">
        <kt-button
          :label="$t('action.reset')"
          perms="true"
          type="primary"
          @click="resetForm()"
        />
        <kt-button
          :label="$t('action.search')"
          perms="true"
          @click="searchForm"
        />
      </div>
    </div>
    <!-- 新增用户,导出按钮 -->
    <div class="add-btns">
      <kt-button
        :label="$t('action.add')"
        perms="SubCenterManage:SubCenterManage:add"
        type="primary"
        @click="handleAdd"
      />
    </div>
    <!--表格内容栏-->
    <Crm-table
      class="table-width"
      SubCenterManage
      permsEdit="true"
      permsDeletePartment="true"
      permsResetPass="true"
      :data="pageResult"
      :columns="columns"
      :loading='loading'
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleResetpass="handleResetpass"
      @changeSwitch="changeSwitch"
    >
    </Crm-table>

    <!--新增编辑界面-->
    <el-dialog
      class="add-pop personBox"
      :title="operation ? '新增' : '编辑'"
      width="30%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @close="addClose"
    >
      <el-form
        :model="dataFormAdd"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataFormAdd"
        :size="size"
        class="SubCenterManageAdd"
        label-position="right"
      >
        <!-- <el-form-item label="ID" prop="id" v-if="false">
				<el-input v-model="dataForm.id" :disabled="true" auto-complete="off"></el-input>
			</el-form-item> -->
        <el-form-item label="分中心编码" prop="code">
          <el-input
            v-model="dataFormAdd.code"
            :disabled="operation ? false : true"
            placeholder="分中心编码"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="分中心名称" prop="name">
          <el-input
            v-model="dataFormAdd.name"
            type="email"
            auto-complete="off"
            placeholder="分中心名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="校长名称" prop="headmaster">
          <el-input
            v-model="dataFormAdd.headmaster"
            type="email"
            auto-complete="off"
            placeholder="校长名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input
            v-model="dataFormAdd.phone"
            auto-complete="off"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择地区" >
          <el-cascader
            clearable
            @change="addressChangeADD"
            size="large"
            :options="options"
            v-model="selectedOptionsAdd"
          ></el-cascader>
        </el-form-item>
        <div class="star1 mb20">
          <p><span class="star">*</span>签约地区</p>
          <div style="width: 80%;float: left;">
            <el-tag
            style="float:left;margin-top: 4px;"
                  v-for="(tag,index) in diqutags3ADD"
                  :key="index"
                  closable
                  v-model="dataFormAdd.name"
                  @close='tagsCloseADD(tag)'
                  :type="tag.type">
                  {{tag.value}}
          </el-tag>
          </div>
        </div>
        <!-- <el-form-item label="签约地区"
        prop="areaCodes"
        :rules="[
          { required: true, message: '请输入签约地区'},
        ]">
          
          <el-tag
            style="float:left;margin-top: 4px;"
                  v-for="(tag,index) in diqutags3ADD"
                  :key="index"
                  closable
                  v-model="dataFormAdd.name"
                  @close='tagsCloseADD(tag)'
                  :type="tag.type">
                  {{tag.value}}
          </el-tag>
        </el-form-item> -->
        <div style="clear:both;"></div> 
        <el-form-item style="clear:both;margin-top:20px" label="业务线" prop="businessType">
          <el-select
            v-model="dataFormAdd.businessType"
            multiple
            placeholder="业务线"
          >
            <el-option
              v-for="item in studentBusinessType"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="dialogVisible = false">{{
          $t("action.cancel")
        }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          v-if="!dataFormAdd.id"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormEdit"
          v-if="dataFormAdd.id"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 重置密码 -->
    <el-dialog
      class="resetpassword"
      title="重置密码"
      width="30%"
      :visible.sync="resetVisible"
      :close-on-click-modal="false"
    >
      <el-form
        label-width="110px"
        :rules="dataFormRules"
        ref="password"
        :model="dataFormAdd"
      >
        <el-form-item label="分中心名称" prop="name">
          <el-input
            v-model="dataFormAdd.name"
            :disabled="true"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          class="resetpassword-pass"
          label="密码"
          prop="resetpassword"
        >
          <el-input
            v-model="dataFormAdd.password"
            type="text"
            auto-complete="off"
            style="width: 50%;margin-right: 10%;margin-left: 1%"
          ></el-input>
          <kt-button
            :label="$t('action.autopassword')"
            @click="autopassword"
            perms="Organization:Person:resetPass"
            type="primary"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :size="size" @click.native="resetVisible = false">{{
          $t("action.cancel")
        }}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="resetPwd"
          :loading="editLoading"
          >{{ $t("action.submit") }}</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import KtButton from "@/views/Core/KtButton";
import CrmTable from "@/views/Core/CrmTable";
import { regionData } from "element-china-area-data";
import QueryBox from "@/views/Core/QueryBox";
import axios from "axios";
import { baseUrl } from "@/utils/global";
import { CodeToText } from "element-china-area-data";
import { isArray } from "@/utils/validate";
export default {
  name: "Person",
  components: {
    PopupTreeInput,
    CrmTable,
    KtButton,
    QueryBox
  },
  data() {
    return {
      size: "small",
      filters: {
        name: ""
      },
      dataForm: {
        // code:'',
        // name:'',
        // headmaster:'',
        // phone:'',
        // signRep:'',
        // status:''
        // branchCenterInfo:{
        //   name:''
        // }
      },
      //   地区
      options: regionData,
      selectedOptions: [],
      diqutags: [],
      exportPersonUrl: baseUrl + "/systemUser/exportUserInfo", //导出地址
      resetpassword: "",
      page: "person",
      columns: [
        { type: "index", label: "序号", minWidth: 50 },
        { prop: "code", label: "分中心编码", minWidth: 80 },
        { prop: "name", label: "分中心名称", minWidth: 100 },
        { prop: "newbusinessType", label: "业务线", minWidth: 150 },
        { prop: "headmaster", label: "校长名称", minWidth: 100 },
        { prop: "phone", label: "手机号码", minWidth: 100 },
        { prop: "area", label: "签约地区", minWidth: 150 },
        { prop: "contractDate", label: "合同到期时间", minWidth: 150 },
        { prop: "zt", label: "状态", minWidth: 120 }
      ],
      pageRequest: { pageNum: 1, pageSize: 8 },
      pageResult: {
        content: [],
        totalSize: ""
      },
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
      resetVisible: false,
      loading: false,
      // resetpassForm:pageResult,
      dataFormRules: {
        code: [
          { required: true, message: "请输入分中心编码", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入分中心名称", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        headmaster: [
          { required: true, message: "请输入校长姓名", trigger: "blur" }
        ],
        area: [{ required: true, message: "请输入签约地区", trigger: "blur" }],
        businessType: [
          { required: true, message: "请输入业务线", trigger: "blur" }
        ],
        areaCode: [
          { required: true, message: "请输入签约地区", trigger: "blur" }
        ]
      },
      // 新增编辑界面数据
      dataFormAdd: {
        userName: "",
        realName: "",
        oneLevelDeptId: "",
        twoLevelDeptId: "",
        threeLevelDeptId: "",
        roleId: "",
        phone: "",
        email: "",
        demoAccount: "",
        accountStatus: "",
        duty: "",
        acccountPassword: "",
        userType: "",
        isControlResource: "",
        areaCodes: "",
        businessType:[]
      },
      deptData: [],
      deptTreeProps: {
        label: "name",
        children: "children"
      },
      isopen: [
        {
          value: "锁定",
          label: "2"
        },
        {
          value: "开启",
          label: "1"
        }
      ],
      branchcenterOption: [],
      signRepOption: [],
      studentBusinessType: [],
      diqutags2: [],
      diqutags3: [],
      diqutagsADD: [],
      diqutags2ADD: [],
      diqutags3ADD: [],
      selectedOptionsAdd: [],
      oldEidtAreaCode: []
    };
  },
  methods: {
    //获取下拉框
    findDown: function() {
      this.$api.dropdown.branchcenter().then(res => {
        this.branchcenterOption = res.branchCenterInfoList;
      });
      this.$api.ownship.querySignRep().then(res => {
        this.signRepOption = res.signRepList;
        let signRepListJson = [];
        for (let i = 0; i < res.signRepList.length; i++) {
          let j = {};
          j.name = res.signRepList[i];
          signRepListJson.push(j);
        }
        for (let i of signRepListJson) {
          i.value = i.name; //将想要展示的数据作为value
        }
        this.signRepOption = signRepListJson;
      });
      // 获取业务线
      this.studentBusinessType = JSON.parse(
        localStorage.getItem("studentBusinessType")
      );
    },

    // 获取分页数据
    findPage: function(data) {
      if (data !== null) {
        this.loading = true;
        this.pageRequest = data.pageRequest;
      }

      this.dataForm.pageSize = this.pageRequest.pageSize;
      this.dataForm.pageNum = this.pageRequest.pageNum;
      this.$api.ownship
        .branchcenterList(this.dataForm)
        .then(res => {
          if (res.result == 1) {
            this.pageResult.content = res.branchCenterInfoList;
            this.pageResult.totalSize = res.total;
            this.loading = false;
            this.pageResult.content.forEach(item => {
              if (item.status == 1) {
                item.zt = "开启";
              } else {
                item.zt = "锁定";
              }
              if (item.businessType) {
                item.businessType = item.businessType.split(",");
                if (item.businessType.length > 0) {
                  let newarry = [];
                  // 业务线转义
                  for (let i = 0; i < item.businessType.length; i++) {
                    let j = {};
                    j.key = item.businessType[i];
                    newarry.push(j);
                  }
                  let newbusinessType = [];
                  item.businessType1 = newarry;
                  this.studentBusinessType.forEach(typeitem => {
                    item.businessType1.forEach(newItem => {
                      if (typeitem.key == newItem.key) {
                        newItem.value = typeitem.value;
                      }
                    });
                  });
                  item.businessType1.forEach(i => {
                    if (item.businessType.length > 1) {
                      newbusinessType.push(i.value + ",");
                    } else {
                      newbusinessType.push(i.value);
                    }
                  });
                  item.newbusinessType = newbusinessType;
                }
              }
              if (item.areaCode) {
                item.areaCode = item.areaCode.split(",");
                if (item.areaCode.length > 0) {
                  let newCodearry = [];
                  // 地区编码添加属性
                  for (let i = 0; i < item.areaCode.length; i++) {
                    let j = {};
                    j.key = item.areaCode[i];
                    newCodearry.push(j);
                  }
                  let newbusinessType = [];
                  item.newAreaCode = newCodearry;
                  item.newAreaCode.forEach(n => {
                    n.value = CodeToText[n.key];
                  });
                }
              }
              // 合同到期时间
              if(item.startDate&&item.stopDate){
                // item.startDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec( item.startDate);
                // item.stopDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec( item.stopDate);
                item.contractDate=item.startDate+'---'+item.stopDate
              }
              
            });
          }
        })
        .then(data != null ? data.callback : "");
    },
    //重置
    resetForm: function() {
      this.dataForm = {};
      this.dataForm.areaCode = "";
      this.selectedOptions = [];
      this.diqutags = [];
      this.diqutags2 = [];
      this.diqutags3 = [];
      this.editLoading = false;
      this.findPage(null);
      this.findDown();
    },
    //查询
    searchForm: function() {
      this.findPage(null);
    },
    //新增页面展示
    handleAdd: function() {
      this.operation = true;
      this.dialogVisible = true;
      this.dataFormAdd = {
        businessType: [],
        phone: "",
        password: 111111
      };
      this.diqutags3 = [];
      this.diqutags3ADD = [];
      this.selectedOptionsAdd = [];
    },
    //编辑页面展示
    handleEdit: function(params) {
      this.operation = false;
      this.dialogVisible = true;
      if(!this.oldEidtAreaCode){
        this.oldEidtAreaCode = params.row.areaCode;
      }
      this.dataFormAdd = Object.assign({}, params.row);
      // 签约地区回显
      this.diqutags3ADD = params.row.newAreaCode;
      this.dataFormAdd.areaCode = params.row.areaCode;
      this.selectedOptionsAdd = [];
    },
    //重置密码页面展示
    handleResetpass: function(params) {
      this.resetVisible = true;
      this.dataFormAdd = Object.assign({}, params.row);
    },

    //密码提交
    resetPwd: function() {
      this.$refs.password.validate(valid => {
        if (valid) {
          this.$confirm("确认重置密码吗？", "提示", {}).then(() => {
            this.data = {
              id: this.dataFormAdd.id,
              password: this.dataFormAdd.password
            };
            this.editLoading = true;
            let params = Object.assign({}, this.data);
            this.$api.ownship.resetPassword(params).then(res => {
              this.editLoading = false;
              if (res.result == 1) {
                this.$message({ message: res.msg, type: "success" });
                this.resetVisible = false;
                this.findPage(null);
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
              this.findPage(null);
            });
          });
        }
      });
    },
    //新增提交
    submitForm: function() {
      this.$refs.dataFormAdd.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataFormAdd);
            delete params.businessType1;
            delete params.newbusinessType;
            delete params.areaCode;
            if(this.dataFormAdd.areaCode){
              params.areaCode = this.dataFormAdd.areaCode.toString(",");
            }else{
              this.$message({ message: "请输入签约地区", type: "error" });
              this.editLoading = false;
            }
            params.businessType =  Array.prototype.join.call(this.dataFormAdd.businessType, ',')
            
            
            if (!params.areaCode || params.areaCode == "") {
              // this.$message({ message: "请输入签约地区", type: "error" });
              this.editLoading = false;
            } else {
              this.$api.ownship.addBranchCenterInfo(params).then(res => {
                this.editLoading = false;
                if (res.result == 1) {
                  this.$message({ message: res.msg, type: "success" });
                  this.dialogVisible = false;
                  this.$refs["dataFormAdd"].resetFields();
                  this.diqutags3ADD = [];
                  this.oldEidtAreaCode = [];
                  this.diqutagsADD = [];
                  this.diqutags3 = [];
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error"
                  });
                  this.editLoading = false;
                }
                this.findPage(null);
              });
            }
          });
        }
      });
    },
    //编辑提交
    submitFormEdit: function() {
      this.$refs.dataFormAdd.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataFormAdd);
            delete params.businessType1;
            delete params.newbusinessType;
            delete params.newAreaCode;
            delete params.areaCode;
            delete params.startDate;
            delete params.stopDate;
            // console.log(this.dataFormAdd.areaCode)
            params.businessType = this.dataFormAdd.businessType.join(",");
            if (this.dataFormAdd.areaCode)
              // params.areaCode=this.dataFormAdd.areaCode.join(",")
              // params.areaCode=this.dataFormAdd.areaCode
            if(isArray(this.dataFormAdd.areaCode)){
            
              params.areaCode = this.dataFormAdd.areaCode.join(",")
            }else{
              params.areaCode = this.dataFormAdd.areaCode
            }
            this.$api.ownship.updateBranchCenterInfo(params).then(res => {
              this.editLoading = false;
              if (res.result == 1) {
                this.$message({ message: res.msg, type: "success" });
                this.dialogVisible = false;
                this.diqutags3ADD = [];
                this.oldEidtAreaCode = [];
                this.diqutagsADD = [];
                this.diqutags3 = [];
                this.resetForm();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
                this.resetForm();
              }
            });
          });
        }
      });
    },
    addClose() {
      this.diqutags3ADD = [];
      this.oldEidtAreaCode = [];
      this.diqutagsADD = [];
      this.diqutags3 = [];
    },
    // 自动生成密码
    autopassword: function() {
      var password = "";
      var passLength = 8;
      var random = new Array(
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      );
      //随机数
      for (let i = 0; i < passLength; i++) {
        //循环操作
        var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
        password += random[index];
      }
      this.dataFormAdd.password = password;
    },
    //switch开关
    changeSwitch: function(data) {
      let userId = data.row.id;
      this.$api.ownship.updateStatus({ id: userId }).then(res => {
        if (res.result == 1) {
          this.$message({ message: res.msg, type: "success" });
          this.findPage(null);
        } else {
          this.$message({ message: res.msg, type: "error" });
          this.findPage(null);
        }
      });
    },
    addressChange(params) {
      // 判断用户是否点击清空
      if (params.length == 0) {
        (this.diqutags.length = 0),
          (this.diqutags3.length = 0),
          (this.diqutags2.length = 0),
          (this.dataForm.areaCode = "");
      } else {
        this.dataForm.areaCode = params[2];
        this.diqutags.push(this.dataForm.areaCode);
        let newarry = [];
        // 追加属性
        for (let i = 0; i < this.diqutags.length; i++) {
          let j = {};
          j.key = this.diqutags[i];
          newarry.push(j);
        }
        this.diqutags2 = newarry;
        this.diqutags2.forEach(item => {
          item.key = item.key;
          item.value = CodeToText[item.key];
        });
        // 去重
        let hash = {};
        const data2 = this.diqutags2.reduce((preVal, curVal) => {
          hash[curVal.key]
            ? ""
            : (hash[curVal.key] = true && preVal.push(curVal));
          return preVal;
        }, []);
        this.diqutags3 = data2;
        // 查询数据重组
        this.dataForm.areaCode = this.diqutags.join(",");
      }
      // this.selectedOptions=[]
    },
    addressChangeADD(params) {
      if (params.length == 0) {
        this.diqutags3ADD.length = 0;
        this.diqutags2ADD.length = 0;
        this.diqutagsADD.length = 0;
        this.dataFormAdd.areaCode = "";
      } else {
        this.diqutagsADD.push(params[2], ...this.oldEidtAreaCode);
        let newarry = [];

        // 追加属性
        for (let i = 0; i < this.diqutagsADD.length; i++) {
          let j = {};
          j.key = this.diqutagsADD[i];
          newarry.push(j);
        }
        this.diqutagsADD=Array.from(new Set(this.diqutagsADD))
        this.diqutags2ADD = newarry;
        this.diqutags2ADD.forEach(item => {
          item.key = item.key;
          item.value = CodeToText[item.key];
        });
        // 去重
        let hash = {};
        const data2 = this.diqutags2ADD.reduce((preVal, curVal) => {
          hash[curVal.key]
            ? ""
            : (hash[curVal.key] = true && preVal.push(curVal));
          return preVal;
        }, []);
        this.diqutags3ADD = data2;
        this.dataFormAdd.areaCode = this.diqutagsADD.join(",");
      }
      // this.selectedOptions=[]
    },
    tagsClose(params) {
      // this.diqutags3.splice(params, 1);
      // this.diqutags.splice(this.diqutags.findIndex(v => v == params.key), 1);
      this.diqutags3.splice(
        this.diqutags3.findIndex(item => item.key === params.key),
        1
      );
      this.diqutags.splice(this.diqutags.findIndex(v => v == params.key), 1);
      this.dataForm.areaCode = this.diqutags.join(",");
      if (this.diqutags.length == 0) {
        this.selectedOptions = [];
      }
    },
    // 新增地区关闭
    tagsCloseADD(params) {
      this.diqutags3ADD.splice(
        this.diqutags3ADD.findIndex(item => item.key === params.key),
        1
      );
      this.diqutagsADD = this.oldEidtAreaCode;
      this.diqutagsADD.splice(
        this.diqutagsADD.findIndex(item => item === params.key),
        1
      );
      this.dataForm.areaCode = this.diqutagsADD.join(",");
      if (this.diqutagsADD.length == 0) {
        this.selectedOptions = [];
      }
    }
  },
  mounted() {
    this.findDown();
    this.findPage(null);
  }
};
</script>
<style>
@import url("../../assets/queryBox.css");
.person input::-webkit-outer-spin-button,
.person input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}
</style>
<style lang="scss">
.SubCenterManageAdd {
  .el-input--suffix .el-input__inner {
    height: 32px;
    line-height: 32px;
    width: 100%;
  }
  .el-cascader {
    width: 100%;
  }
  .addFormADD {
    float: left;
  }
  .star1 {
    > p {
      float: left;
      margin-right: 38px;
    }

    .star {
      display: inline-block;
      color: red;
    }
  }
}
</style>
